<!--
 * @Description: 6C实时监控--规则引擎
 * @Author: Wang zhongwang
 * @Date: 2023-11-01
 * @LastEditTime: 2023-11-01 18:15:40
-->
<template>
  <!--  -->

  <div class="app-container v-flex">
    <!-- filter -->
    <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" style="margin-bottom: 10px;">
      <el-button type="success" size="mini" icon="el-icon-plus" @click="addRule">新增规则</el-button>
      <el-button type="primary" size="mini" icon="el-icon-search" @click="getListPage">查询</el-button>
    </filter-form>
    <!-- filter -->
    <div ref="main" class="v-flex-elastic">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        tooltip-effect="dark"
        :height="height"
        style="width: 100%;">
        <el-table-column align="center" label="规则名称" prop="ruleName" />
        <el-table-column align="center" label="规则标识" prop="ruleIdentification" />
        <el-table-column align="center" label="规则描述" prop="remark" width="280" />
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <span style="margin-right: 10px">
              <el-tooltip class="item" content="修改" effect="light" placement="top">
                <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="updateRule(scope.row)" />
              </el-tooltip>
            </span>
            <span style="margin-right: 10px">
              <el-tooltip class="item" content="删除" effect="light" placement="top">
                <el-button circle icon="el-icon-delete" size="mini" type="primary" @click="deleteRule(scope.row)" />
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page-box">
      <pagination :total="total" :page.sync="listQuery.page" :size.sync="listQuery.size" @pagination="getListPage" />
    </div>
    <!-- 分页 -->
    <div>
      <add-event :dialog="dialog" />
      <update-event :dialog="updateDialog" />
    </div>

  </div>
</template>

<script>

import { getListPage, deletRuleById } from '@/api/cms/monitor/event'
import { tableMixin } from '@/utils/public'
import addEvent from './components/addEvent'
import updateEvent from './components/updateEvent'

export default {
  name: 'RuleEngineer',
  components: {
    addEvent,
    updateEvent
  },
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: 0,
      tableKey: 0,
      list: null,
      current: 1,
      total: 0,
      listLoading: false,

      // 顶部操作栏配置
      filterData: {
        ruleName: {
          key: 'ruleName',
          type: 'input',
          title: '规则名称',
          placeholder: '请输入规则名称'
        }
      },
      // 查询参数
      listQuery: {
        page: 1,
        size: 20,
        ruleName: null,
        model: null
      },

      dialog: {
        title: '创建规则',
        visible: false,
        disabled: false,
        loading: false
      },
      updateDialog: {
        title: '修改规则',
        visible: false,
        disabled: false,
        loading: false,
        id: null
      }
    }
  },
  computed: {
  },
  activated() {
    this.getListPage()
  },
  created() {
    console.log(this.dict)
  },
  deactivated() {
  },
  methods: {
    // 查询列表信息
    getListPage() {
      this.listLoading = true
      // 查询列表信息
      getListPage(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    deleteRule: function(row) {
      this.confirmBox(`确定删除这条数据?`)
        .then(() => {
          deletRuleById({ 'id': row.id })
          this.getListPage()
        })
        .catch(() => {})
    },
    addRule() {
      const dialog = {
        title: '创建规则',
        visible: true,
        disabled: false,
        loading: false
      }
      this.dialog = Object.assign(this.dialog, dialog)
    },
    updateRule: function(row) {
      this.id = row.id
      const updateDialog = {
        title: '修改规则',
        visible: true,
        disabled: false,
        loading: false,
        id: row.id
      }
      this.updateDialog = Object.assign(this.updateDialog, updateDialog)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
